<template>
  <view
    class="process"
    :style="{
      backgroundColor: bgColor
    }"
  >
    <view
      class="container"
      :style="{
        width: width + 'rpx'
      }"
    >
      <view
        class="teamA"
        :style="{
          width: teamAWidth
        }"
      >
        <text class="teamAText">{{ teamAScore > 1000000 ? (teamAScore / 10000).toFixed(0) + "万" : teamAScore }}积分</text>
      </view>
      <view
        class="teamB"
        :style="{
          width: teamBWidth
        }"
      >
        <text class="teamBText">{{ teamBScore > 1000000 ? (teamBScore / 10000).toFixed(0) + "万" : teamBScore }}积分</text>
      </view>
      <image class="teamALogo" :src="IMAGES.VIDEO_TEAMA"></image>
      <image class="teamBLogo" :src="IMAGES.VIDEO_TEAMB"></image>
      <image
        class="vsImage"
        :src="IMAGES.VIDEO_VS"
        :style="{
          left: vsWidth
        }"
      ></image>
    </view>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
export default {
  name: "cheer",
  computed: {
    IMAGES: () => IMAGES,
    teamAWidth() {
      if (!this.teamAScore && !this.teamBScore) {
        return this.width / 2 + "rpx";
      } else {
        return (this.teamAScore / (this.teamAScore + this.teamBScore)) * this.width + "rpx";
      }
    },
    teamBWidth() {
      if (!this.teamAScore && !this.teamBScore) {
        return this.width / 2 + "rpx";
      } else {
        return (this.teamBScore / (this.teamAScore + this.teamBScore)) * this.width + "rpx";
      }
    },
    vsWidth() {
      if (!this.teamAScore && !this.teamBScore) {
        return this.width / 2 - 62 + "rpx";
      } else {
        return (this.teamAScore / (this.teamAScore + this.teamBScore)) * this.width - 62 + "rpx";
      }
    }
  },
  props: {
    width: {
      type: Number,
      default: 650
    },
    // 背景色
    bgColor: {
      type: String,
      default: "initial"
    },
    teamAScore: {
      type: Number,
      default: 0
    },
    teamBScore: {
      type: Number,
      default: 0
    }
  }
};
</script>
<style lang="scss" scoped>
.process {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: center;
  height: 106rpx;
}
.container {
  padding: 10rpx 0;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.teamA,
.teamB {
  position: absolute;
  height: 50rpx;
}
.teamA {
  background-image: linear-gradient(to right, #2881de, #4e9ce0);
  text-align: left;
  padding-left: 40rpx;
}
.teamB {
  background-image: linear-gradient(to right, #fb7493, #f2374b);
  right: 0;
  text-align: right;
  padding-right: 40rpx;
}
.teamAText,
.teamBText {
  font-size: 28rpx;
  color: #ffffff;
  line-height: 50rpx;
}
.teamAText {
  text-align: left;
}
.teamBText {
  text-align: right;
}
.teamALogo,
.teamBLogo {
  width: 87rpx;
  height: 87rpx;
}
.teamALogo {
  margin-left: -48.5rpx;
}
.teamBLogo {
  margin-right: -48.5rpx;
}
.vsImage {
  position: absolute;
  top: -5rpx;
  width: 124rpx;
  height: 117rpx;
  z-index: 1;
}
</style>
